import React, {useState} from 'react'
import { useHistory } from 'react-router-dom'

import {Container, NavLi} from './StyleNoticeLeft'

const NoticeLeft = (props) => {
    let history = useHistory()
    let [state] = useState({
        num: [{
            id: '111',
            reading: '2',
            over: '2',
        }],
        noticelist: props.list})
        return (
            <Container>
                {
                    state.num.map(item => {
                    return <div className="notice1" key={item.id}>待阅读<span>{item.reading}</span>条， 待签收<span>{item.over}</span>条</div>
                    })
                }
                {
                    state.noticelist.map(v => {
                     return <div className="notice2" key={v.tuId} >
                        <p>
                             <img src={"http://9z4nm9.natappfree.cc/"+ v.img} alt="" />
                            <i></i>
                        </p>
                        <ul>
                            <NavLi
                                width="0 0 1px 0"
                                color="#666"
                                 onClick={() => { history.push('/noticeDetail', v) }}>{v.tzName}</NavLi>
                            <li >{v.tzDate}</li>
                        </ul>
                    </div>
                 })
                }                
            </Container>
        );
    }

export default NoticeLeft;